<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <XForm class="pt-[10px]" ref="formRef" :fieldList="fieldList" :options="formOption" :formData="form" />
      </template>
      <template #toolbar_btns>
        <el-button type="primary" @click="customFeeOpen" v-hasPermi="[reportAuthList.custom_fee_new.import]">费用导入</el-button>

        <el-button type="primary" @click="handleBatchApproval" v-hasPermi="[reportAuthList.custom_fee_new.batchAudit]"> 批量审核 </el-button>
        <!-- <span>费用导入成功，审核通过后系统自动计算利润</span> -->
      </template>
    </VTable>

    <ConfirmInput title="批量审核" class="w-[500px]" :loading="loading" v-model="approvalVisible" :field-options="approvalOptions" :rules="approvalRules" @submit="handleApproval" />

    <UploadFeeImport ref="uploadFeeImportRef" @refresh="handleRefresh" />

    <Log dialog v-model="logVisible" :autoLoad="false" tag="expense_customize_import" :business_id="logId" />
  </VPage>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus"
import Log from "@/components/Log/index.vue"
import XForm from "@/components/XForm/index.vue"
import UploadFeeImport from "./components/uploadFeeImport/index.vue"
const uploadFeeImportRef = ref()
import ConfirmInput from "@/components/ConfirmInput/index.vue"
import { expenseCustom, reviewExpenseCustom } from "./api"
import { reportAuthList } from "@/Auth/report.js"
import { ref, toRefs, reactive, onMounted } from "vue"
const publicStyle = { style: { width: "220px" } }
const formRef = ref()
const listRef = ref()
const tableRef = ref()
const approvalVisible = ref(false)
const loading = ref(false)
const rows = ref([])

onMounted(async () => {})
const formOption = ref({
  inline: true,
})
const fieldList = ref([
  {
    field: "userRange",
    type: "cascader",
    itemProps: { placeholder: "人员" },
    select: [
      { label: "添加人员", value: "create_user" },
      { label: "审核人员", value: "reviewer_id" },
    ],
    style: { width: "300px" },
  },

  {
    field: "timeRange",
    type: "dateTimeRangeNorm",
    select: [
      { label: "添加时间", value: "create_time" },
      { label: "审核时间", value: "review_at" },
    ],
    style: { width: "368px" },
  },
  {
    field: "status",
    origin: "expense_customize_import_status",
    type: "select",
    options: {
      data: [],
      placeholder: "状态",
    },
    ...publicStyle,
  },
])

// 列表配置
const tableOptins = reactive({
  formConfig: {
    data: {
      userRange: { type: "create_user", value: "" },
      timeRange: { type: "create_time", value: "" },
    },
  },
  showOverflow: true,
  columns: [
    { width: 50, type: "checkbox" },
    { width: 100, title: "ID", field: "id" },
    { title: "导入方式", field: "import_mode_desc", width: 100 },
    { title: "备注", field: "remark" },
    { title: "费用项", field: "expense_item_desc" },
    { title: "审核状态", field: "status_desc", width: 100 },
    { title: "导入状态", field: "import_status_desc", width: 100 },
    { title: "添加人", field: "create_user", width: 120 },
    { title: "添加时间", field: "create_time", width: 170 },
    { title: "审核人", field: "reviewer", width: 150 },
    { title: "审核时间", field: "review_at", width: 170 },
    {
      title: "操作",
      width: 200,
      slots: {
        default: ({ row }) => {
          return [
            <div class="flex flex-wrap">
              <el-button link type="primary" onClick={() => ruleEdit(row, "look")}>
                详情
              </el-button>

              {row.status != 1 ? (
                <el-button link type="primary" onClick={() => ruleEdit(row, "edit")} v-hasPermi={[[reportAuthList.custom_fee_new.edit]]}>
                  编辑
                </el-button>
              ) : (
                ""
              )}
              {row.import_status != 3 ? (
                <el-button link type="primary" onClick={() => handleBatchApproval(row)} v-hasPermi={[[reportAuthList.custom_fee_new.audit]]}>
                  审批
                </el-button>
              ) : (
                ""
              )}

              <el-button link type="primary" onClick={() => handleLog(row)}>
                日志
              </el-button>
            </div>,
          ]
        },
      },
    },
  ],

  proxyConfig: {
    ajax: {
      query: ({ page, form }) => expenseCustom({ ...form, ...page, is_new: 1 }),
    },
  },
})
const ruleEdit = (row, type) => {
  customFeeOpen(row, type)
}
//获取已选中的行
const getSelectRow = () => {
  const getCheckboxRecords = tableRef?.value.$table.getCheckboxRecords()
  if (!getCheckboxRecords.length) {
    ElMessage({ showClose: true, message: "请至少选择一条数据！", type: "warning" })
    return false
  }
  return getCheckboxRecords
}

// const handleSubmit = async (params) => {
//   tableRef?.value?.$table?.commitProxy("reload")
// }
const handleBatchApproval = (row = {}) => {
  if (row.id) {
    rows.value = [row]
  } else {
    const select = getSelectRow()
    if (!select.length) return
    rows.value = select
  }

  approvalVisible.value = true
}
const handleApproval = async (formValues) => {
  try {
    loading.value = true
    await reviewExpenseCustom({
      ids: rows.value.map((n) => n.id),
      ...formValues,
    })
    ElMessage.success("审核成功")
    rows.value = []
    approvalVisible.value = false
    handleRefresh()
  } catch (e) {
  } finally {
    loading.value = false
  }
}

const handleRefresh = () => {
  tableRef?.value?.$table?.reloadData([])
  tableRef?.value?.$table?.commitProxy("reload")
}
const approvalOptions = [
  {
    label: "审核状态",
    field: "status",
    type: "select",
    origin: "expense_customize_import_status",
    style: { width: "100%" },
    itemProps: { popperAppendToBody: true, teleported: true },
  },
]
const approvalRules = {
  status: [{ required: true, message: "请选择审核状态", trigger: "blur" }],
}

const customFeeOpen = (row = null, type = "") => {
  uploadFeeImportRef.value.open(row, type)
}
// 日志
const logVisible = ref(false)
const logId = ref("")
const handleLog = (item) => {
  logId.value = item.id
  logVisible.value = true
}
defineExpose({})
</script>

<style lang="scss" scoped></style>
